import React, {FC, useState} from 'react';
import {View, Text, StyleSheet, Image, TouchableOpacity} from 'react-native';
import icon_daily from '../../../assets/icon_daily.png';
import icon_search from '../../../assets/icon_search.png';
type PropsType = {
  tab: number;
  onTabChanged?: (tab: number) => void;
};
const Title: FC<PropsType> = (props: PropsType) => {
  const {tab, onTabChanged} = props;
  const [tabIndex, setTabIndex] = useState<number>(tab);
  const onDailyPress = () => {};
  const onSearchPress = () => {};
  return (
    <View style={styles.titleLayout}>
      <TouchableOpacity onPress={onDailyPress} style={styles.dailyBtn}>
        <Image source={icon_daily} style={styles.icon} />
      </TouchableOpacity>
      <TouchableOpacity
        style={styles.tabBtn}
        onPress={() => {
          setTabIndex(1);
          onTabChanged?.(1);
        }}>
        <Text style={tabIndex === 1 ? styles.tabTxtSelected : styles.tabTxt}>
          关注
        </Text>
        {tabIndex === 1 && <View style={styles.line} />}
      </TouchableOpacity>
      <TouchableOpacity
        style={styles.tabBtn}
        onPress={() => {
          setTabIndex(2);
          onTabChanged?.(2);
        }}>
        <Text style={tabIndex === 2 ? styles.tabTxtSelected : styles.tabTxt}>
          发现
        </Text>
        {tabIndex === 2 && <View style={styles.line} />}
      </TouchableOpacity>
      <TouchableOpacity
        style={styles.tabBtn}
        onPress={() => {
          setTabIndex(3);
          onTabChanged?.(3);
        }}>
        <Text style={tabIndex === 3 ? styles.tabTxtSelected : styles.tabTxt}>
          杭州
        </Text>
        {tabIndex === 3 && <View style={styles.line} />}
      </TouchableOpacity>
      <TouchableOpacity onPress={onSearchPress} style={styles.searchBtn}>
        <Image source={icon_search} style={styles.icon} />
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  titleLayout: {
    width: '100%',
    height: 40,
    flexDirection: 'row',
    backgroundColor: 'white',
    alignItems: 'center',
    paddingHorizontal: 16,
  },
  icon: {
    width: 28,
    height: 28,
    resizeMode: 'contain',
  },
  dailyBtn: {
    height: 40,
    justifyContent: 'center',
    alignItems: 'center',
    paddingRight: 12,
    marginRight: 40,
  },
  searchBtn: {
    height: 40,
    justifyContent: 'center',
    alignItems: 'center',
    paddingLeft: 12,
    marginLeft: 40,
  },
  tabBtn: {
    flex: 1,
    height: '100%',
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
    textAlign: 'center',
  },
  tabTxt: {
    fontSize: 14,
    color: '#999',
  },
  tabTxtSelected: {
    fontSize: 16,
    color: '#333',
    fontWeight: 'bold',
  },
  line: {
    width: 28,
    height: 2,
    backgroundColor: '#ff2442',
  },
});
export default Title;
